<template>
  <div id="app">
    <button @click="update">更新</button>
    <p ref="msg">{{msg}}--{{length}}</p>
    <p>msg2: {{msg2}}</p>
  </div>
</template>

<script>

export default {
  name: 'NextTickTest',

  data () {
    return {
      msg2: 'abc',
      msg: 'atguigu'
    }
  },

  computed: {
    length () {
      return this.msg.length
    }
  },

  watch: {
    msg () {
      debugger
      console.log('watch msg', this.$refs.msg.innerHTML)
    }
  },

  methods: {
    update () {
      this.msg = 'cba' // renderWatcher异步执行  nextTick(flushQueue)
      // nextTick(flushQueue) => flushQueue保存到callbacks, 同步将flushCallBacks函数放到微队列或宏队列

      this.$nextTick(() => {
        alert(this.$refs.msg.innerHTML)
      })
    }
  },
}
</script>